<template>
  <div :id="`barChart${index}`"></div>
</template>

<script>
  import { Chart } from '@antv/g2'

  export default {
    name: 'BarChart',
    props: ['value','index','isSelected'],
    mounted() {
      this.initCharts()
    },
    methods: {
      initCharts() {
        const chart = new Chart({
          container: `barChart${this.index}`,
          autoFit: true,
          width: 300,
          height: 400,
          padding: [50, 50, 50, 50]
        });
        chart.data(this.value);
        chart.scale('value', {
          alias: '填写人数'
        });
        if (this.isSelected) {
          chart.axis('type', {
            tickLine: {
              alignTick: false
            }
          });
          chart.legend(false)
          chart.axis('value', false);

          chart.tooltip({
            showMarkers: false
          });
          chart.interaction('brush');
          chart.interval().position('type*value').color('value','#EBAC88');

          chart.interaction('element-active');

          // 添加文本标注
          this.value.forEach((item) => {
            chart
              .annotation()
              .text({
                position: [item.type, item.value],
                content: item.value,
                style: {
                  textAlign: 'center'
                },
                offsetY: -30
              })
          });
        } else {
          chart.axis('varchar', {
            tickLine: {
              alignTick: false
            }
          });
          chart.legend(false)
          chart.axis('value', false);

          chart.tooltip({
            showMarkers: false
          });
          chart.interaction('brush');
          chart.interval().position('varchar*value').color('value','#EBAC88');

          chart.interaction('element-active');

          // 添加文本标注
          this.value.forEach((item) => {
            chart
              .annotation()
              .text({
                position: [item.varchar, item.value],
                content: item.value,
                style: {
                  textAlign: 'center'
                },
                offsetY: -30
              })
          });
        }

        chart.render();
      }
    }
  }
</script>

<style scoped>

</style>
